import React,{useEffect,useState} from 'react'
import Myaction from '../Myaction';
import { Button, Table,Modal } from 'antd';
import '../Wofaqideshenpi.css'
import Myfrom from '../Myfrom';




export default function Linshifukuanshenqingshenpi() {
    //表格的列项
    const columns = [
      {
        title: '序号',
        dataIndex: 'key',
        align:'center',
        key: 'key',
      },
      {
        title: '标题',
        dataIndex: 'age',
        align:'center',
        key: 'age',
      },
      {
        title: '拟付款日期',
        dataIndex: 'address',
        align:'center',
        key: '1',
      },
      {
        title: '付款金额',
        dataIndex: 'address',
        align:'center',
        key: '2',
      },
      {
        title: '所属项目',
        dataIndex: 'address',
        align:'center',
        key: '3',
      },
      {
        title: '关联合同',
        dataIndex: 'address',
        align:'center',
        key: '4',
      },
      {
        title: '是否紧急',
        dataIndex: 'address',
        align:'center',
        key: '5',
      },
      {
        title: '申请人',
        dataIndex: 'address',
        align:'center',
        key: '6',
      },
      {
        title: '提交时间',
        dataIndex: 'address',
        align:'center',
        key: '7',
      },
      {
        title: '审核状态',
        dataIndex: 'examineState',
        align:'center',
        key: 'examineState',
      },
      {
        title: '操作',
        // key: 'operation',
        align:'center',
        dataIndex: 'action',
        fixed: 'right',
        width: 200,
        render: text=> <div>{text}</div>
      },
    ];
    //后端请求的初始数据
    const [data,setData] = useState([
      {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York Park',
        examineState:'草稿'
      },
      {
        key: '2',
        name: 'Jim Green',
        age: 40,
        address: 'London Park',
        examineState:'草稿'
      },
      {
        key: '3',
        name: 'Jim Green',
        age: 40,
        address: 'London Park',
        examineState:'审核通过'
      },
      {
        key: '4',
        name: 'Jim Green',
        age: 40,
        address: 'London Park',
        examineState:'审核拒绝'
      },
    ]);
    //处理后的数据
    const [arr,setArr] = useState([])
    //存储每条数据的id
    const [dataId,setDataId] = useState('')
    //控制模态框的显示隐藏
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isDelModalVisible, setIsDelModalVisible] = useState(false);
    //模态框显示的处理时间
    const showModal = (id) => {
      setDataId(id)
      setIsModalVisible(true);
    };
    //点击模态框确认的处理事件
    const handleOk = () => {
      let newdata = []
      newdata = data.map(item=>{
        if(item.key===dataId){
          item.state='待审核'
        }
        return item
      })
      setData(newdata)
      setIsModalVisible(false);
    };
    //取消模态框
    const handleCancel = () => {
      setIsModalVisible(false);
    };
     //删除模态框显示的处理事件
  const delshowModal = (id) => {
    setDataId(id)
    setIsDelModalVisible(true);
  };
  //点击删除模态框确认的处理事件
  const delhandleOk = () => {
    setIsDelModalVisible(false);
  };
  //取消删除模态框
  const delhandleCancel = () => {
    setIsDelModalVisible(false);
  };
    //组件加载请求数据，处理数据
    useEffect(()=>{
      let myarr = []
      myarr = data.map(item=>{
        let obj = {
          key:item.key,
          name:item.name,
          age:item.age,
          address:item.address,
          examineState:item.examineState,
          action:<Myaction id={item.key} showModal={showModal} delshowModal={delshowModal}/>
        }
        return obj
      })
      setArr(myarr)
    },[data])
    //获取表单数据
  const getfromdata = (data)=>{
    console.log(data);
}
    return (
        <div className='content'>
            <Myfrom getdata={getfromdata} label='拟付款日期'/>
            <div className='table'>
                <div className='new'><Button type='primary' size='large'>新增临时付款申请</Button></div>
                <Table
                    columns={columns}
                    dataSource={arr}
                    scroll={{
                        x: 1300,
                    }}
                />
            </div>
            <Modal title="确认提交" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} centered okText="确认" cancelText='取消'>
              <h2 className='ifDel'>是否继续提交材料采购付款申请</h2>
              <p className='del'>提交后将不可撤回</p>
            </Modal>
            <Modal title="确认删除" visible={isDelModalVisible} onOk={delhandleOk} onCancel={delhandleCancel} okText="确认" cancelText='取消'>
              <h2 className='ifDel'>是否确认删除该岗位</h2>
              <p className='del'>删除后将不可恢复</p>
            </Modal>
        </div>
    )
}

